<template>
  <div class="activity-member-management">
    <!-- 成员列表 -->
    <el-table :data="paginatedMemberList" class="member-table">
      <el-table-column prop="userId" label="用户编号" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="grade" label="年级" />
      <el-table-column prop="major" label="专业" />
      <el-table-column prop="class" label="班级" />
      <el-table-column prop="contact" label="联系方式" />
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="totalItems"
          layout="total, prev, pager, next"
          @current-change="handlePageChange"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useUserStore } from "../../../../stores/user";
import {
  ActivityControllerService,
  type ActivityMembershipQueryRequest,
  type UserVO,
} from "../../../../../generated";
import { useRoute } from "vue-router";

// 定义成员数据结构
interface Member {
  userId: number;
  username: string;
  grade: string;
  major: string;
  class: string;
  contact: string;
}

interface ActivityInfo {
  id: number;
  activityName: string;
  clubName: string;
}

const userStore = useUserStore();
const memberList = ref<Member[]>([]);
const activityInfo = ref<ActivityInfo>({
  id: 0,
  activityName: "",
  clubName: "",
});
const totalItems = ref(0);

const currentPage = ref(1);
const pageSize = ref(10);

const route = useRoute();
const activityIdStr = Number(route.query.activityId);
const activityId = Number(activityIdStr);
const queryRequest = ref<ActivityMembershipQueryRequest>({
  pageSize: 10,
  current: 1,
  activityId: activityId,
});

const loadData = async () => {
  try {
    const membershipRes =
        await ActivityControllerService.listUserVoInActivityByPage(
            queryRequest.value,
        );
    if (membershipRes.code === 0) {
      const userVoList = membershipRes.data?.records as UserVO[];
      memberList.value = userVoList.map(
          (userVO) =>
              ({
                userId: userVO?.id,
                username: userVO?.userName,
                grade: userVO?.grade,
                major: userVO.major,
                class: userVO?.userClass,
                contact: userVO?.phoneNumber,
              }) as Member,
      );
      totalItems.value = memberList.value.length;
    } else {
      memberList.value = [];
      ElMessage.error("加载数据失败：" + (membershipRes.message || "未知错误"));
    }

    const activityRes =
        await ActivityControllerService.getActivityVoById(activityId);
    if (activityRes.code === 0) {
      activityInfo.value = {
        id: activityRes.data?.id as number,
        activityName: activityRes.data?.activityName as string,
        clubName: activityRes.data?.clubVO?.clubName as string,
      };
    } else {
      ElMessage.error("加载数据失败：" + (activityRes.message || "未知错误"));
    }
  } catch (error) {
    console.error("加载数据时发生错误:", error);
    ElMessage.error("加载数据时发生错误，请稍后重试");
  }
};

const paginatedMemberList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return memberList.value.slice(start, end);
});

onMounted(() => {
  loadData();
});

// 页码改变处理
const handlePageChange = (page: number) => {
  currentPage.value = page;
};

</script>
<style scoped>
.activity-member-management {
  padding: 20px;
  background: white;
}

.member-table {
  width: 100%;
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}
</style>
